<template>
	<!-- 商铺广告 -->
	<el-scrollbar>
		<div class="filter-container">
			<div class="filter-item">
				<el-select v-model="oStatus" placeholder="请选择广告类型" clearable>
					<el-option v-for="item in userStatus" :key="item.status" :value="item.status" :label="item.label">
					</el-option>
				</el-select>
				<el-select v-model="adType" placeholder="请选择广告类型" clearable>
					<el-option v-for="item in gender" :key="item.id" :label="item.label" :value="item.id">
					</el-option>
				</el-select>
			</div>
			<div>
				<el-button type="primary" icon="el-icon-search" @click="liste()" v-insert="['promote:advertisement:query']">查找</el-button>
				<el-button type="primary" @click="upad()" icon="el-icon-edit" v-insert="['promote:advertisement:create']">添加</el-button>
			</div>
			<!-- 弹窗 -->
			<el-dialog :title="title" :visible.sync="dialogFormVisible" class="on" v-if="dialogFormVisible">
				<el-form :model="form" :rules="rules" ref="form" label-width="100px">
					<el-form-item label="广告标题" :label-width="formLabelWidth" prop="title">
						<el-input v-model="form.title" autocomplete="off" width="50px"></el-input>
					</el-form-item>
					<el-form-item label="广告图片" :label-width="formLabelWidth" prop="imgUrl ">
						<el-upload class="avatar-uploader" action="http://192.168.1.54:8081/upload/admin" :show-file-list="false"
						 :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
							<img v-if="form.imgUrl " :src="form.imgUrl " class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					<el-form-item label="广告类型" :label-width="formLabelWidth" prop="adType">
						<el-select v-model="form.adType" placeholder="请选择">
							<el-option v-for="item in gender" :key="item.id" :label="item.label" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="广告状态" :label-width="formLabelWidth" prop="status">
						<el-select v-model="form.status" placeholder="请选择">
							<el-option v-for="item in userStatus" :key="item.status" :value="item.status" :label="item.label">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="关联1" :label-width="formLabelWidth" prop="url">
						<el-cascader v-model="form.url" :options="options" placeholder="关联类目、商品" @change="handleChange1" :props="{ checkStrictly: true }"
						 clearable>
						</el-cascader>
					</el-form-item>
					<el-form-item label="关联2" :label-width="formLabelWidth" prop="color">
						<el-select v-model="form.color" placeholder="关联功能页面">
							<el-option label='团购列表' value="1">
								团购列表
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="demil()">确 定</el-button>
				</div>
			</el-dialog>
		</div>
		<div>
			<el-main class="Main">
				<el-table :data="tableData" border style="width: 100%" empty-text="暂无数据" size="mini" v-loading="loading"
				 element-loading-text="正在查询中。。。">
					<el-table-column prop="id" label="广告ID" align="center" sortable>
					</el-table-column>
					<el-table-column prop="title" label="广告标题" align="center">
					</el-table-column>
					<el-table-column prop="adType" label="广告类型" align="center">
						<template slot-scope="scope">
							<el-tag type="primary" plain>{{ scope.row.adType == '4' ? "首页轮播下5按钮" : scope.row.adType == '2' ? "分类精选" : scope.row.adType == '1' ? "轮播" : "横幅" }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="status" label="广告状态" align="center">
						<template slot-scope="scope">
							<el-tag type="primary" plain>
								{{scope.row.status==0?'冻结':'激活'}}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="imgUrl" label="广告图片" align="center">
						<template slot-scope="scope">
							<img :src="scope.row.imgUrl" style="width: 80px !important" />
						</template>
					</el-table-column>
					<el-table-column prop="url" label="活动链接" align="center">
					</el-table-column>
					<el-table-column label="操作" align="center">
						<template slot-scope="scope">
							<el-button type="primary" @click="upad(scope.row)" size="small" v-insert="['promote:advertisement:update']">编辑</el-button>
							<el-button type="danger" @click="del(scope.row)" size="small" v-insert="['promote:advertisement:delete']">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-main>

		</div>
		<el-container>
			<el-header class="buttom">
				<div class="block1">
					<span class="demonstration"></span>
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"
					 :page-size="count" :total="totalCount" :page-sizes="[10, 20, 30, 40, 50, 100]">
					</el-pagination>
				</div>
			</el-header>
		</el-container>
	</el-scrollbar>
</template>

<script>
	import {
		Shoplist,
		Shoptree,
		Shopaddupdate,
		Shopdel
	} from '../../api/shopadvert.js'
	export default {
		data() {
			var checktitle = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('广告标题不能为空'))
				} else {
					callback()
				}
			}
			var validateimgUrl = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('广告图片不能为空'))
				} else {
					callback()
				}
			}
			return {
				input: '',
				loading: true,
				tableData: [],
				count: 20,
				totalCount: 1,
				radio1: 1,
				dialogFormVisible: false,
				title: '',
				pageNo: 1,
				adType: '',
				oStatus: '',
				userStatus: [{
						status: 0,
						label: '冻结'
					},
					{
						status: 1,
						label: '激活'
					},
					{
						status: null,
						label: '全部'
					}
				],
				gender: [{
						label: '轮播',
						id: 1
					},
					{
						label: '分类精选',
						id: 2
					},
					{
						label: '横幅',
						id: 3
					},
					{
						label: '首页轮播下5按钮',
						id: 4
					},
					{
						label: '全部',
						id: null
					}
				],
				value: '',
				formLabelWidth: '140px',
				form: {
					title: '',
					imgUrl: '',
					adType: '',
					status: '',
					url: '',
					updataID: '',
					color: ''
				},
				rules: {
					title: [{
						required: true,
						validator: checktitle,
						trigger: 'blur'
					}],
					imgUrl: [{
						required: true,
						validator: validateimgUrl,
						trigger: 'blur'
					}],
					adType: [{
						required: true,
						message: '请选择广告类型',
						trigger: 'change'
					}],
					status: [{
						required: true,
						message: '请选择广告状态',
						trigger: 'change'
					}]
				},
				options: []
			}
		},
		created() {
			this.liste()
			this.list()
			// console.log(this.ruleForm.imgUrl)
		},
		methods: {
			// 删除
			del(row) {
				console.log(row)
				this.$confirm(`此操作将永久删除该用户---'${row.title}'---是否继续?', '提示`, {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						console.log(row)
						const data = {
							adType: row.adType,
							adId: row.id
						}
						Shopdel(data).then((resspose) => {
							console.log(resspose)
							if (resspose.data.errmsg == '成功') {
								this.liste()
								this.$message({
									type: 'success',
									message: '删除成功'
								})
							} else {
								this.$message.error({
									type: 'info',
									message: resspose.data.errmsg
								})
							}
						})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})
			},
			// spu树
			list() {
				Shoptree().then((resspose) => {
					this.options = this.renderTreeNodes(resspose.data.data)
				})
			},
			renderTreeNodes(datas) {
				const data = []
				datas.map((item) => {
					if (item.children.length > 0) {
						const dadax = {
							id: item.id,
							label: item.label,
							value: item.id,
							children: this.renderTreeNodes(item.children)
						}
						data.push(dadax)
					} else {
						const dadax = {
							id: item.id,
							label: item.label,
							value: item.id
						}
						data.push(dadax)
					}
					return data
				})
				return data
			},
			upad(row) {
				console.log(row)
				this.dialogFormVisible = true
				if (!row) {
					this.title = '创建'
					this.form.adType = ''
					this.form.title = ''
					this.form.url = ''
					this.form.imgUrl = ''
					this.form.status = ''
					this.form.color = ''
				} else {
					console.log(row, '456564465')
					this.title = '编辑'
					this.updataID = row.id
					var index = row.url.lastIndexOf('=')
					var arr = {
						title: row.title,
						adType: row.adType,
						status: row.status,
						url: Number(row.url.substring(index + 1, row.url.length)),
						color: '',
						imgUrl: row.imgUrl
					}
					this.form = arr
				}
			},
			demil() {
				this.$refs.form.validate((valid) => {
					if (this.form.url.length < 3 && this.form.color == '') {
						this.$message.error({
							type: 'info',
							message: '请关联三级目录或者商品'
						})
					} else if (valid) {
						const url = this.form.url == '' ? '/pages/groupshop/list' : '/pages/product/list?tid=' + this.form.url[this.form
							.url.length - 1]
						const params = {
							_mt: this.title == '创建' ? 'addAdvertisement' : 'updateAdvertisement',
							adType: this.form.adType,
							title: this.form.title,
							url: url,
							imgUrl: this.form.imgUrl,
							status: this.form.status,
							color: 'rgb(122, 194, 182)',
							adId: this.updataID
						}
						console.log(this.title, params, '789789789')
						Shopaddupdate(params).then((resspose) => {
							if (resspose.data.errmsg == '成功') {
								this.dialogFormVisible = false
								this.liste()
								this.$message({
									type: 'success',
									message: this.title == '编辑' ? '更新用户成功' : '添加用户成功'
								})
							} else {
								this.$message.error(resspose.data.errmsg)
							}
						})
					}
				})
			},
			handleAvatarSuccess(res, file) {
				this.form.imgUrl = res.url
			},
			handleChange1(value) {},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`)
				this.count = val
				this.liste()
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`)
				this.pageNo = val
				this.liste()
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg'
				const isLt2M = file.size / 1024 / 1024 < 2

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!')
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!')
				}
				return isJPG && isLt2M
			},
			liste() {
				const params = {
					status: this.oStatus,
					adType: this.adType,
					pageNo: this.pageNo,
					limit: this.count
				}
				Shoplist(params).then((response) => {
					if (response.data.errmsg == '成功') {
						// 查询列表
						this.loading = false
						console.log(response, '456456')
						this.tableData = response.data.data.items
						this.totalCount = response.data.data.total
						this.count = response.data.data.pageSize
					} else {
						setTimeout(() => {
							this.loading = false
						}, 5000)
					}
				})
			}

		},
		watch: {
			'form.url'(newValue, oldValue) {
				console.log(newValue)
				if (newValue) {
					this.form.color = ''
				}
			},
			'form.color'(newValue, oldValue) {
				console.log(newValue)
				if (newValue) {
					this.form.url = ''
				}
			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	.filter-container {
		width: 100%;
		height: 54px;
		line-height: 60px;
	}

	// 中间
	.el-main {
		// background-color: #E9EEF3;
		color: #333;
		text-align: center;
		width: 100%;
		overflow: hidden;
		overflow-x: auto;
	}

	// 底部
	.buttom {
		// background-color: #B3C0D1;
		color: #333;
		// text-align: center;
		width: 100%;
		height: 130px !important;
	}

	.filter-item {
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 10px;
		margin-right: 4px;
		float: left;
	}

	.el-input {
		width: 200px !important;
		padding-left: 4px !important;
	}

	.on .el-input {
		width: 300px !important;
	}

	.el-form-item__label {
		text-align: center;
	}

	.el-table--border,
	.el-table--group {
		font-size: 10px !important;
	}

	.el-pagination {
		padding: 24px 10px !important;
	}

	/* 头像上传 */
	.avatar-uploader .el-upload {

		position: relative;
		overflow: hidden;
	}

	.avatar-uploader-icon:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 120px;
		height: 120px;
		line-height: 120px;
		text-align: center;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
	}

	.avatar {
		width: 120px;
		height: 120px;
		display: block;
	}

	.el-select {
		margin: 0px 10px;
	}
</style>
